<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            vertical-align: middle;
            display: inline-block;
            width: 100px;
        }
    </style>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <label>全选</label><input type="checkbox" :checked='all' @change='all1'>
        </div>
        <div v-for="(item,index) in cart" :key='index'>
            <input type="checkbox" :checked='item.status' @change='check(index)'>
            <span>{{item.name}}</span>
            <span><img :src="item.img" alt="" width="100"></span>
            <span>{{item.price}}</span>
            <span>{{item.num}}</span>
        </div>
        <div>
            <span>总计{{totalNum}}(件)</span>
            <span>总计{{totalPrice}}(元)</span>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        created(){
            this.cart.map((item)=>{
                item.status==1?item.status=true:item.status=false
            })
        },
        computed:{
            totalNum(){
                let num=0
                this.cart.map((item)=>{
                    if(item.status){
                        num+=item.num
                    }
                })
                return num
            },
            totalPrice(){
                let num=0
                this.cart.map((item)=>{
                    if(item.status){
                        num+=item.num*item.price
                    }
                    
                })
                return num
            }
        },
        data: {
            all:false,
            status:false,
            cart: [
                {
                    name: 'vivo IQ777',
                    img: 'https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/166249/4/1781/100467/5ffc0654Eb618aa21/2188e4ef3f6abe7e.jpg.webp',
                    price: 2999,
                    num: 1,
                    status:1
                },
                {
                    name: '小米10',
                    img: 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/97161/40/12127/66234/5e440190E7cd0f54e/33627b2c39a67241.jpg.webp',
                    price: 999,
                    num: 1,
                    status:0
                },
                {
                    name: '传世的珐琅锅',
                    img: 'https://img20.360buyimg.com/seckillcms/s280x280_jfs/t1/168750/15/16697/127861/606c22c0Eca19515e/5adfe8e452fffbff.png.webp',
                    price: 1799,
                    num: 1,
                    status:1
                },
                {
                    name: '蔻驰的丑包',
                    img: 'https://img12.360buyimg.com/ceco/s300x300_jfs/t1/119430/19/3585/133796/5eb12fe7E1a4ee264/392d83858bb8cd52.jpg!q70.jpg.webp',
                    price: 17865,
                    num: 1,
                    status:0
                },
            ]
        },
        methods:{
            // 全选
            all1(){
                this.all=!this.all
               this.cart.map(item=>{
                   item.status= this.all
               })
            },
            
            check(index){
                this.cart[index].status=! this.cart[index].status
                let res=this.cart.every(item=>{
                    return item.status
                })
                this.all=res
            }
        }
    })
</script>

</html>